<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-10-25 14:11:20
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-10-26 11:59:02
 * @FilePath: \old-supply-shop_vue\components\storeMap\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <!-- <view id="container"></view>
    <view class="location" @click="setMapCenter(location.lat, location.lng)">
      <image src="/static/image/location.svg"></image>
    </view> -->
  </div>
</template>

<script>
var wx = require("jweixin-module");
var map,
  path = [];
import { $https } from "@/static/js/request.js";
export default {
  props: {},
  data() {
    return {
      markers: [], // 点
      location: {
        lng: "",
        lat: "",
      }, // 位置
    };
  },
  mounted() {
    path = [];
    // 初始化地图
    // this.initMap();
    // 在应用初始化时进行微信 JS-SDK 的配置
    this.wxconfig();
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.indexOf("micromessenger") === -1) {
      alert("请使用微信浏览器访问");
    }
  },
  methods: {
    wxconfig() {
      let that = this;
      new Promise(function (resolve, reject) {
        $https(
          "GET",
          "wxConfig",
          {
            type: "default",
          },
          (res) => {
            if (res.data.errcode == 0) {
              // 在应用初始化时进行微信 JS-SDK 的配置和初始化
              wx.config({
                debug: false,
                // 是否开启调试模式
                appId: res.data.data.appId,
                // 公众号的唯一标识
                timestamp: res.data.data.timestamp,
                // 生成签名的时间戳
                nonceStr: res.data.data.nonceStr,
                // 生成签名的随机串
                signature: res.data.data.signature,
                // 签名
                jsApiList: ["getLocation"],
                // 需要使用的JS接口列表
              });
              // 在配置成功后调用ready方法
              wx.ready(function () {
                // 在这里调用微信 JS-SDK 的接口
                wx.getLocation({
                  type: "wgs84",
                  success: function (result) {
                    that.getLocation(result);
                  },
                });
              });
              wx.error(function (res) {
                // 可以在这里输出错误信息或进行相应提示
                alert("微信 JS-SDK 配置初始化失败" + JSON.stringify(res));
                uni.switchTab({
                  url: "/pages/tabar/index?isGuide=true",
                });
              });
              resolve();
            }
          },
          true
        );
      });
    },
    // 地图标记
    generateMarker(arr) {
      arr.forEach(function (item, index) {
        let marker = new TMap.MultiMarker({
          id: "marker-layer-" + index,
          map: map,
          styles: {
            marker: new TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: { x: 16, y: 32 },
            }),
          },
          geometries: [
            {
              id: "demo-" + index,
              styleId: "marker",
              position: item.position,
              properties: {
                title: "marker-" + index,
              },
            },
          ],
        });
      });
    },
    // 设置地图中心
    setMapCenter(lat, lng) {
      if (!lat && !lng) return;
      map.setCenter(new TMap.LatLng(lat, lng));
    },
    initMap() {
      let center = new TMap.LatLng(28.678002, 115.847658);
      //初始化地图
      map = new TMap.Map("container", {
        zoom: 10, // 设置地图缩放级别
        center: center, //设置地图中心点坐标
        pitch: 10, // 俯仰度
      });
    },
    // 获取位置
    getLocation(result) {
      let lng = result.longitude || "";
      let lat = result.latitude || "";
      this.location = {
        lng,
        lat,
      };
      let option = {
        lng,
        lat,
        page: 1,
        size: 100000,
        name: "",
      };
      $https(
        "GET",
        "getStoreList",
        option,
        (res) => {
          if (res.data.errcode == 0) {
            let list = res.data.data.list;
            // 传递列表和位置信息
            this.$emit("getList", { list, location: this.location });
            list.forEach((item) => {
              // this.marker position位置 url打点的图片
              this.markers.push({
                position: new TMap.LatLng(item.lat, item.lng),
              });
            });
            // 打点
            this.generateMarker(this.markers);
          } else {
            this.$u.toast(res.data.errmsg);
          }
        },
        true
      );
    },
  },
};
</script>

<style lang='scss' scoped>
.content {
  position: relative;
  #container {
    width: 100%;
    height: 600rpx;
  }
  .location {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 480rpx;
    right: 20rpx;
    z-index: 1000000;
    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
}
</style>